<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ taglib uri="/WEB-INF/tlds/att.tld" prefix="att"%>
<html>

<head> 
	<meta name="decorator" content="moduleEdit"/> 
	<script src="${staticPath}/lib/art-template/template.js"></script>
<script type="text/javascript"> 
	function changeTwoDecimal(v) {
	    if (isNaN(v)) {//参数为非数字
	        return 0.00;
	    }
	    var fv = parseFloat(v);
	    fv = Math.round(fv * 100) / 100; //四舍五入，保留两位小数
	    var fs = fv.toString();
	    var fp = fs.indexOf('.');
	    if (fp < 0) {
	        fp = fs.length;
	        fs += '.';
	    }
	    while (fs.length <= fp + 2) { //小数位小于2位，则补0
	        fs += '0';
	    }
	    return fs;
	}
	
	$(document).ready(function() {
		var param = {
		        language:  'zh-CN',
		        weekStart: 1,
		        todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				minView: 2,
				forceParse: 0,
				format: 'yyyy-mm-dd'
		    };
	    $('#startDate').datetimepicker(param);
	    $('#endDate').datetimepicker(param);
	    var regionCode=$("#regionCode").val();
	    if(regionCode=='10001'||regionCode=='10003'){
		    loadApprovalByShop(); 
	    }else{
	    	$("#approvalId").val(",1065020");
	    }
	   /*  loadShopSelectData(); */
	});
	
	/*function loadApprovalByShop(){
		//$("#selectApproval").empty();
		//$("#selectApproval").append('<option value="">--请选择--</option>');
		$("#approvalId").val('');
		var shopCode = $("#shopCode").val();
		if(shopCode==null || shopCode==""){
			return false;
		}
		$.getJSON(Com_Parameter.ContextPath
				+ "/common/getDataList?s_bean=selectApprovalByShopService&shopCode="+shopCode,function(data){
			$.each(data, function(index, val) {
				 //$("#checkApprovalBox").append('<input id="checkbox['+index+']" type="checkbox" name="approvlCheck" value="'+val.id+','+'"><label for="element4_1">'+val.name+'</label>'); 
				$("#approvalId").val($("#approvalId").val()+ val.id +',');
			})
		})
	}*/
     /* function loadApprovalByShop(){
		$("#selectApproval").empty();
		$("#selectApproval").append('<option value="">--请选择--</option>');
		var shopCode = $("#shopCode").val();
		if(shopCode==null || shopCode==""){
			return false;
		}
		$.getJSON(Com_Parameter.ContextPath
				+ "/common/getDataList?s_bean=selectApprovalByShopService&shopCode="+shopCode,function(data){
			$.each(data, function(index, val) {
				 $("#checkApprovalBox").append('<input id="checkbox['+index+']" type="checkbox" name="approvlCheck" value="'+val.id+','+'"><label for="element4_1">'+val.name+'</label>'); 
				$("#selectApproval").append('<option value="' + val.id + '">'
						+ val.name + '</option>');
			})
		})
	}  */
	function loadApprovalByShop(){
		var shopCode=$("#shopCode").val();
		$("#approvalId").val('');
		$("#approvalId").val(',');
		$.getJSON(Com_Parameter.ContextPath
				+ "/common/getDataList?s_bean=selectApprovalByShopService&shopCode="+shopCode,function(data){
			$.each(data, function(index, val) {
				if(data.length-1>index){
				  $("#approvalId").val($("#approvalId").val()+ val.id+',');
				}else {
		          $("#approvalId").val($("#approvalId").val()+ val.id);
				}
			})
		})
	}
	
	function loadShopSelectData(){
		var regionCode = $("#regionCode").val();
		var $shopCode = $("#shopCode");
		$shopCode.empty();
		$shopCode.append('<option value="">--请选择--</option>');
		if(!regionCode || regionCode==""){
			return false;
		}
		$.getJSON(Com_Parameter.ContextPath
				+ "/common/getDataList?s_bean=selectOneShopService&regionCode="+regionCode,function(data){
			$.each(data, function(index, val) {
				$shopCode.append('<option value="' + val.id + '">'
						+ val.name + '</option>');
			});
		})
	}
	
	function recalculated(_this){
		if(typeof _this == "object"){
			var $this = $(_this);
			var name = $this.attr("name");
			var value = $this.val();
			var nameFields = name.split(".");
			var totalAmountValue = 0.00;
			var taxAmountValue = 0.00;
			var taxRate = 0;
			var taxCode = 0;
			if(nameFields[1] == "totalAmount"){
				if(!(typeof value == "undefined") && value != ""){
					totalAmountValue = changeTwoDecimal(value);
				}
				$this.val(totalAmountValue);
				taxCode = $('select[name="'+nameFields[0]+'.taxCode"]').val();
			}else{
				totalAmountValue = $('input[name="'+nameFields[0]+'.totalAmount"]').val();
				taxCode = value;
			}
			if("J1" == taxCode){
				taxRate = 17;
			}else if("J4" == taxCode || "J5" == taxCode){
				taxRate = 13;
			}
			$('input[name="'+nameFields[0]+'.taxRate"]').val(taxRate);
			taxAmountValue = totalAmountValue * taxRate / (100 + taxRate);
			$('input[name="'+nameFields[0]+'.taxAmount"]').val(changeTwoDecimal(taxAmountValue));
		}
		var billingAmount = $("#billingAmount").val();
		var billedAmount = 0.00;
		var unbilledAmount = 0.00;
		var totalAmount = 0.00;
		var taxAmount = 0.00;
		$('input[data-field="totalAmount"]').each(function (){
			totalAmount += $(this).val() * 1;
		});
		$('input[data-field="taxAmount"]').each(function (){
			taxAmount += $(this).val() * 1;
		});
		unbilledAmount = billingAmount * 1 - totalAmount;
		unbilledAmount = changeTwoDecimal(unbilledAmount);
		totalAmount = changeTwoDecimal(totalAmount);
		taxAmount = changeTwoDecimal(taxAmount);
		billedAmount = totalAmount - taxAmount;
		$("#totalAmount").val(totalAmount);
		$("#taxAmount").val(taxAmount);
		$("#unbilledAmount").val(unbilledAmount);
		$("#billedAmount").val(billedAmount);
		var label = "";
		if( unbilledAmount > 0.05){
			label = "未开票金额必须在(-* - 0.05)¥范围内";
		}
		$("#unbilledAmountLabel").text(label);
	}
	
	function addRow(tabelId){
		var $table = $(tabelId);
		var index = $table.attr("data-index");
		if(typeof index == "undefined" || index == ""){
			index = 0;
		}
		var obj = {};
		obj.index = index;
		var html = template('mrow-tmp', obj);
		$table.append(html)
		$table.attr("data-index",index * 1 + 1);
	}
	function deleteRow(_this,tabelId){
		var tr = $(_this).closest("tr");
		var $table = $(tabelId);
		var index = $table.attr("data-index");
		if(typeof index == "undefined" || index == ""){
			index = 0;
		}
		tr.remove();
		$table.attr("data-index",index * 1 - 1);
		refreshIndex(tabelId);
		recalculated();
	}
	function refreshIndex(tabelId){
		var $table = $(tabelId);
		var index = 0;
		$table.find('tr[data-row="content"]').each(function (){
			var replaceText = "["+index+"]";
			$(this).find("[name]").each(function (){
				var name = $(this).attr("name");
				name = name.replace(/\[\d+]/g, replaceText);
				$(this).attr("name",name);
			});
			index++;
		});
	}
	
	function check(){
		var canSubmit = true;
		$('input[data-field="invoiceCode"]').each(function (){
			if($(this).val() == ""){
				alert("发票代码不能为空！");
				canSubmit = false;
				return false;
			}
		});
		if(!canSubmit){
			return false;
		}
		var shopCode = $("#shopCode").val();
		if(typeof shopCode == "undefined" || shopCode == ""){
			alert("分店不能为空!");
			return false;
		}
		var unbilledAmount = changeTwoDecimal($("#unbilledAmount").val());
		if( unbilledAmount > 0.05){
			alert("未开票金额必须在(-* - 0.05)¥范围内!");
			return false;
		}
		/* var s='';
		var obj=document.getElementsByName('approvlCheck');  
		for(var i=0; i<obj.length; i++){
		
				if(obj[i].checked){
					s+=obj[i].value;
				}
		}
		$('#approvalId').val(s);  */
		/*  var selectApproval = $("#selectApproval").val();
		if(selectApproval==''){
			alert("审批人不能为空");
			return false;
		}
		$('#approvalId').val(selectApproval);  */
		 if(confirm("请确认发票明细是否正确！")){
		$('#submitId').attr("disabled","true");
		return true;
		 }
	    return false;
	}
</script>

</head>
<body>
	<div class="Report_f">
           <div class="Report_f_1">
                <div class="Report_f_title_1">供应商发票信息</div>
                <ul class="nav nav-tabs Report_f_title_2">
                    <li><a href="#label_1" data-toggle="tab">基本信息</a></li>
                  </ul>
                  <!-- Tab panes -->
                  <div class="tab-content Report_f_title_3">
                    <div class="tab-pane active" id="label_1">
                         <div class="Report_f_title_4">
								<form:form id="frm" modelAttribute="statementInvoice" action="${contextPath}/biz/statement/invoice/add?flag=${flag}" method="post"
								   class="form-inline" role="form" onsubmit="return check()">
					           	   <form:hidden path="id" />
					           	   <form:hidden path="status"/>
					           	   <form:hidden path="approvalDate"/>
					           	   <form:hidden path="approvalOpinion"/>
					           	   <form:hidden path="approver" id="approvalId"/>
					           	   <form:hidden path="companyCode"/>
					           	   <form:hidden path="year"/>
					           	   <form:hidden path="billId"/>
					               <form:hidden path="shopCode" />
					               <form:hidden path="regionCode"/>
					               <form:hidden path="deptId"/>
					               <form:hidden path="invoiceType"/>
                                   <div class="f_3">
                                       <div class="form-group col-sm-6">
                                            <label for="inputtext3" class="col-sm-3 control-label f_4">供应商编号: </label>
                                            <div class="col-sm-9 f_6">
                                            	<c:choose>
                                            		<c:when test="${statementInvoice.supplierNo == ''}">
                                            			<form:input id="supplierNo" path="supplierNo" maxlength="200" class="form-control f_5"/></div>
                                            		</c:when>
                                            		<c:otherwise>
                                            			<form:hidden path="supplierNo"/>
                                            			${statementInvoice.supplierNo}
                                            		</c:otherwise>
                                            	</c:choose>
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-6">
                                            <label for="inputtext3" class="col-sm-3 control-label f_7">供应商名称:</label>
                                            <div class="col-sm-9 f_6">
                                            	<c:choose>
                                            		<c:when test="${statementInvoice.supplierName == ''}">
                                            			<form:input id="supplierName" path="supplierName" maxlength="200" class="form-control f_5"/></div>
                                            		</c:when>
                                            		<c:otherwise>
                                            			<form:hidden path="supplierName"/>
                                            			${statementInvoice.supplierName}
                                            		</c:otherwise>
                                            	</c:choose>
                                            </div>
                                        </div>
                                   </div>
                                   <div class="f_2">
                                         <div class="form-group col-sm-6">
                                             <label for="inputtext3" class="col-sm-3 control-label f_7">供应商合同号:</label>
                                             <div class="col-sm-9 f_6">
                                            	 <div class="col-sm-7 f_14">
                                            	 	<c:choose>
	                                            		<c:when test="${statementInvoice.contractNumber == ''}">
	                                            			<form:input id="contractNumber" path="contractNumber" maxlength="200" class="form-control f_5"/></div>
	                                            		</c:when>
	                                            		<c:otherwise>
	                                            			<form:hidden path="contractNumber"/>
	                                            			${statementInvoice.contractNumber}
	                                            		</c:otherwise>
	                                            	</c:choose>
                                                </div>
                                             </div>
                                         </div>
                                          <div class="form-group col-sm-6">
                                             <label for="inputtext3" class="col-sm-3 control-label f_4">结算单号:</label>
                                             <div class="col-sm-9 f_6">
                                            	 <div class="col-sm-7 f_14">
                                            	 	<c:choose>
	                                            		<c:when test="${statementInvoice.billNo == ''}">
	                                            			<form:input id="billNo" path="billNo" maxlength="200" class="form-control f_5"/></div>
	                                            		</c:when>
	                                            		<c:otherwise>
	                                            			<form:hidden path="billNo"/>
	                                            			${statementInvoice.billNo}
	                                            		</c:otherwise>
	                                            	</c:choose>
	                                            </div>
                                             </div>
                                         </div>
                                    </div>
                                    <div class="f_3">
                                        <div class="form-group col-sm-6">
                                             <label for="inputtext3" class="col-sm-3 control-label f_4">结算开始日期:</label>
                                             <div class="col-sm-9 f_6">
                                            	 <div class="col-sm-7 f_14">
                                           			<input id="startDate" name="startDate" type="text" class="form-control f_13"
														value="<fmt:formatDate value="${statementInvoice.startDate}" pattern="yyyy-MM-dd"/>" readonly="true"/>
	                                            </div>
                                             </div>
                                         </div>
                                         <div class="form-group col-sm-6">
                                             <label for="inputtext3" class="col-sm-3 control-label f_7">结算结束日期:</label>
                                             <div class="col-sm-9 f_6">
                                            	 <div class="col-sm-7 f_14">
                                            	 	<input id="endDate" name="endDate" type="text" class="form-control f_13"
																value="<fmt:formatDate value="${statementInvoice.endDate }" pattern="yyyy-MM-dd"/>" readonly="true"/>
												 </div>
                                             </div>
                                         </div>
                                    </div>
                                   <div class="f_2">
                                       <div class="form-group col-sm-6">
                                            <label for="inputtext3" class="col-sm-3 control-label f_4">区域:</label>
                                            <div class="col-sm-9 f_6">
                                               <div class="input-group">
											      <ossp:select name="regionCode" id="regionCode"
													value="${statementInvoice.regionCode}"
													service="selectOneRegionService"
													htmlEleProperties="disabled=\"disabled\""></ossp:select>
											    </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-6">
                                            <label for="inputtext3" class="col-sm-3 control-label f_7">分店:</label>
                                            <div class="col-sm-9 f_6">
                                               <div class="input-group">
											      <ossp:select name="shopCode" id="shopCode"
													value="${statementInvoice.shopCode}"
													service="selectOneShopService"
													htmlEleProperties="disabled=\"disabled\""></ossp:select>
											    </div>
                                            </div>
                                        </div>
                                   </div>
                                    <div class="f_3">
                                        <div class="form-group col-sm-6">
                                            <label for="inputtext3" class="col-sm-3 control-label f_7">应开票金额:</label>
                                            <div class="col-sm-9 f_6">
                                           	 <div class="col-sm-7 f_14">
                                            	 	<form:input path="billingAmount" htmlEscape="false" class="form-control f_13" readonly="true"/>
                                               </div>
                                               <span style="line-height: 35px;padding-left: 5px;">¥</span>
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-6">
                                             <label for="inputtext3" class="col-sm-3 control-label f_4">已开票金额:</label>
                                             <div class="col-sm-9 f_6">
                                            	 <div class="col-sm-7 f_14">
                                            	 	<form:input path="billedAmount" htmlEscape="false" class="form-control f_13" readonly="true"/>
                                                </div>
                                                <span style="line-height: 35px;padding-left: 5px;">¥</span>
                                             </div>
                                         </div>
                                    </div>
                                   <div class="f_2">
                                       <div class="form-group col-sm-6">
                                            <label for="inputtext3" class="col-sm-3 control-label f_4">税额:</label>
                                            <div class="col-sm-9 f_6">
                                           	 <div class="col-sm-7 f_14">
                                           	 	<form:input path="taxAmount" htmlEscape="false" class="form-control f_13" readonly="true"/>
                                               </div>
                                               <span style="line-height: 35px;padding-left: 5px;">¥</span>
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-6">
                                            <label for="inputtext3" class="col-sm-3 control-label f_7">价税合计金额:</label>
                                            <div class="col-sm-9 f_6">
                                           	 <div class="col-sm-7 f_14">
                                           	 		<form:input path="totalAmount" htmlEscape="false" class="form-control f_13" readonly="true"/>
                                               </div>
                                               <span style="line-height: 35px;padding-left: 5px;">¥</span>
                                            </div>
                                        </div>
                                   </div>
                                    <div class="f_3">
                                         <div class="form-group col-sm-6">
                                             <label for="inputtext3" class="col-sm-3 control-label f_7">未开票金额:</label>
                                             <div class="col-sm-9 f_6">
                                            	 <div class="col-sm-7 f_14">
                                            	 	<form:input path="unbilledAmount" htmlEscape="false" class="form-control f_13" readonly="true"/>
                                                </div>
                                                <span style="line-height: 35px;padding-left: 5px;">¥</span>
                                                <span class="label label-danger" id="unbilledAmountLabel"></span>
                                             </div>
                                         </div>
                                         <div class="form-group col-sm-6">
                                             <label for="inputtext3" class="col-sm-3 control-label f_7">楼层:</label>
                                             <div class="col-sm-9 f_6">
                                            	 <div class="col-sm-7 f_14">
                                            	 	<form:input path="floorName" id="floorName" htmlEscape="false" class="form-control f_13" disabled="true"/>
                                                </div>
                                                <span style="line-height: 35px;padding-left: 5px;"></span>
                                             </div>
                                         </div>
                                    </div>
                                   <%--  <div class="f_3">
                                         <div class="form-group col-sm-6">
                                             <label for="inputtext3" class="col-sm-3 control-label f_7">审批人:</label>
                                             <div class="col-sm-9 f_6">
                                                <div class="col-sm-7 f_14">
                                                <select id="selectApproval" name="selectApproval" class="f_5"  value="${statementInvoice.approver}" >
                                                 <option value="">--请选择--</option>
                                                 <option value="1065020">张诗林</option>
                                                </select>
                                            	<!--  <div class="col-sm-7 f_14" id="checkApprovalBox"> -->
                                            	 	<form:input id="approvalMan" path="approvalMan" htmlEscape="false" class="form-control f_13" readonly="true"/>
                                                </div>
                                             </div>
                                         </div>	
                                    </div> --%>
                                    <div class="f_2">
										<h4>
											发票明细<input onclick="addRow('#invoiceDetailTable')" type="button" class="btn btn-success btn-sm pull-right" value="添加"></input>
										</h4>
										<table class="table table-striped o-l-table" id="invoiceDetailTable">
											<thead>
												<tr>
													<th style="width: 140px">发票号码</th>
													<th style="width: 120px">税率</th>
													<th style="width: 14%">价税合计金额</th>
													<th style="width: 12%">税额</th>
													<th style="width: 15%">联系电话</th>
													<th>备注</th>
													<th style="width: 50px">操作</th>
												</tr>
											</thead>
											<tbody>
												<c:forEach items="${statementInvoice.invoiceDetailList}" var="itemCode" varStatus="var">
													<tr data-row="content">
														<td>
															<input type="hidden" name="invoiceDetailList[${var.index}].taxRate" value="0.0">
															<input type="hidden" name="invoiceDetailList[${var.index}].invoiceId" value="${statementInvoice.id}">
															<input type="text" class="f_5" data-field="invoiceCode" name="invoiceDetailList[${var.index}].invoiceCode">
															<input type="text" class="f_5" name="invoiceDetailList[${var.index}].invoiceCode">
														</td>
														<td><ossp:select dictType="INVOICE_TAXCODE" name="invoiceDetailList[${var.index}].taxCode" value="${itemCode.taxCode}" isShowSelectTips="false" htmlEleProperties="onchange=\"recalculated(this)\""></ossp:select></td>
														<td><input type="text" class="f_5" name="invoiceDetailList[${var.index}].totalAmount" onchange="recalculated(this)"></td>
														<td><input type="text" class="f_5" name="invoiceDetailList[${var.index}].taxAmount" readonly="readonly"></td>
														<td><input type="text" class="f_5" name="invoiceDetailList[${var.index}].contactNumber"></td>
														<td><textarea rows="2" class="f_5" name="invoiceDetailList[${var.index}].remark"></textarea></td>
														<td><input type="button" onclick="deleteRow(this,'#invoiceDetailTable')" value="删除" class="btn btn-default btn-sm"></td>
													</tr>
												</c:forEach>
											</tbody>
										</table>
									</div>
									<c:if test="${isReconciliation!='3'}">
                                   <div class="f_12">
                                        <button type="submit" id="submitId" class="btn btn-success btn_5 btn_right">保&nbsp;存</button>
                                   </div>
                                   </c:if>
                              </form:form>
                         </div>
                    </div>
				  </div>
				</div>	
		</div>
<script id="mrow-tmp" type="text/html">
<tr data-row="content">
	<td>
		<input type="hidden" name="invoiceDetailList[{{index}}].taxRate" value="${statementInvoice.taxRate}">
		<input type="hidden" name="invoiceDetailList[{{index}}].invoiceId" value="${statementInvoice.id}">
		<input type="text" class="f_5" data-field="invoiceCode" name="invoiceDetailList[{{index}}].invoiceCode">
	</td>
	<!--<td><ossp:select dictType="INVOICE_TAXCODE" name="invoiceDetailList[{{index}}].taxCode" isShowSelectTips="false" htmlEleProperties="onchange=\"recalculated(this)\""></ossp:select></td>-->
    <td><select  name="invoiceDetailList[{{index}}].taxCode" class="f_5">
                                                <option value="${statementInvoice.taxRateCode}">${statementInvoice.taxRateName}</option>
                                                </select></td>
	<td><input type="text" class="f_5" data-field="totalAmount" name="invoiceDetailList[{{index}}].totalAmount" value="0.00" onchange="recalculated(this)"></td>
	<td><input type="text" class="f_5" data-field="taxAmount" name="invoiceDetailList[{{index}}].taxAmount" value="0.00" readonly="readonly"></td>
	<td><input type="text" class="f_5" name="invoiceDetailList[{{index}}].contactNumber"></td>
	<td><textarea rows="2" class="form-control f_11" name="invoiceDetailList[{{index}}].remark"></textarea></td>
	<td><input type="button" onclick="deleteRow(this,'#invoiceDetailTable')" value="删除" class="btn btn-default btn-sm"></td>
</tr>
</script>
</body>
</html>
                                                </select>